<template>
    <div id="tmpl">
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="imglist(0)">全部</li>
                <li v-for="item in cates" @click="imglist(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div class="describe">
                            <h5>{{item.title}}</h5>
                            <p v-html="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import common from './../../../kits/common.js';
    import { Toast } from 'mint-ui';
    export default{
       data(){
           return{
               ulWidth:320,
               cates:[
//                   {"title": "家居生活",
//                   "id": 14},
//                   {"title": "摄影设计",
//                       "id": 15},
//                   {"title": "明星美女",
//                       "id": 16}
               ],
               list:    [
//                   {
//                       "id": 52,
//                       "title": "柳岩出席设计师好友兰玉的高级成衣发布Show",
//                       "img_url": "http://182.254.146.100:8080/upload/201504/18/thumb_201504181426524427.jpg",
//                       "zhaiyao": "北京四季酒店,柳岩出席设计师好友兰玉的高级成衣发布Show,她身穿兰玉设计的纯白卡肩礼服惊艳登场,优雅晚装发髻搭配翡翠镶钻珠宝,举手投足尽显大气温婉,而卡肩低胸的礼服设计更是衬托出柳岩傲人的事业线资本,性感指数爆灯,入场即引来现场阵阵骚动,柳岩轻松看秀全程甜笑连连,心情…"
//                   },
//                   {
//                       "id": 53,
//                       "title": "昆凌最新大片",
//                       "img_url": "http://182.254.146.100:8080/upload/201504/18/thumb_201504181431411505.jpg",
//                       "zhaiyao": "昆凌与周杰伦新婚后就马上投入了工作中，近日一组时尚大片她穿上最新一季春装，脸颊红扑扑对镜头甜笑，展露青春气息。"
//                   }
               ]
           }
       },
        created(){
            this.getcates();
            var all = 0;
            this.imglist(all);
        },
        methods:{
            getcates(){
                var url = common.apidomain + '/api/getimgcategory';
                this.$http.get(url).then(function(response){
                    var data = response.body;
                    if(data.status != 0){
                        Toast(data.message);
                        return;
                    }
                    this.cates = data.message;

                    var w = 62;
                    var count = data.message.length+1;
                    this.ulWidth = w * count;
                })
            },
            imglist(cateid){
                cateid = cateid || 0;
                var url = common.apidomain+'/api/getimages/'+cateid;
                this.$http.get(url).then(function(response){
                    var data = response.body;
                    if(data.status != 0){
                        Toast(data.message);
                        return;
                    }
                    this.list = data.message;
                })
            }
        }
    }
</script>

<style scoped>
    #cate{
        width: 375px;
        max-width: 375px;
        overflow-x:auto;
    }
    #cate ul{
        margin: 0px;
        padding-left: 10px;
    }
    #cate li{
        cursor: pointer;
        list-style: none;
        display: inline-block;
        color:#0094ff;
        font-size: 14px;
        padding-left: 6px;
    }
    #imglist{

    }
    #imglist ul{

    }
    #imglist li{
        position: relative;
    }
    #imglist li img{
        width: 100%;
        height: 300px;
    }
    .describe{
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        width: 100%;
        bottom: 5px;
        left: 0;
    }
    .describe h5{
        color: #ffffff;
        font-weight: bold;
    }
    .describe p{
        color: #fff;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>